<template>
  <div class="flex flex-col h-full overflow-hidden">
    <SearchContainer @search="getData" @reset="() => formRef.resetFields()">
      <a-form ref="formRef" class="form-style-flex" :model="formState">
        <a-form-item label="姓名" class="w-1/5 ml-5">
          <SelectTable v-model:value="formState.brName" type="患者" :table-width="640" @select="getPatientInfo" />
        </a-form-item>
      </a-form>
    </SearchContainer>
    <a-card class="mt-2 w-full flex-1 overflow-hidden" :body-style="{ overflow: 'hidden', height: '100%' }">
      <div class="w-full h-full flex">
        <div class="w-[400px]">
          <BaseTable
            fill
            :loading="loading"
            :columns="columns"
            :data-source="tableData"
            bordered
            :custom-row="(record) => ({ onClick: () => onSelect(record) })"
            :pagination="false"
          />
          <!-- <a-pagination v-model:current="pageNo" :total="total" @change="getHistrory" /> -->
        </div>
        <div class="flex-1 p-4 overflow-y-auto">
          <a-timeline>
            <a-timeline-item v-for="item in histroryData" :key="item.changeTime">
              <div class="w-full flex">
                <div class="mr-4">
                  {{ item.changeTime }} <span class="ml-2"> {{ item.changeUserName }}</span>
                </div>
                <div>
                  <div v-for="list in item.systemDataChangeInfos" :key="list.id" class="mb-1">
                    <span class="text-primary mr-2">{{ list.columnNameCn || '-' }}</span> {{ list.originData === 'null' ? '空' : list.originData }} ——
                    {{ list.changeData }}
                  </div>
                </div>
              </div>
            </a-timeline-item>
          </a-timeline>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import SearchContainer from '@/components/SearchContainer'
// import dayjs from 'dayjs'
// import { post } from '@/utils/request'

// const rowData = ref({})
// const pageNo = ref(1)
// const total = ref(0)
const loading = ref(false)
const formRef = ref(null)
const columnName = ref('')
const formState = ref({})
const tableData = ref([])
const histroryData = ref([])
const columns = ref([
  {
    title: '字段',
    dataIndex: 'columnNameCn'
  },
  {
    title: '值',
    dataIndex: 'columnValue'
  }
])
const currentPatient = ref({})
const getPatientInfo = async (patient) => {
  loading.value = true
  currentPatient.value = {}
  formState.value.brName = patient.brName
  const { data, mes, code } = await post('/outp/brDataChange/getBrInfoCn', { brId: patient.brId })
  if (code !== 0) return message.error(mes || '获取数据失败')
  currentPatient.value = patient
  loading.value = false
  tableData.value = data
  columnName.value = ''
  getHistrory()
}
const onSelect = (record) => {
  columnName.value = record.columnName
  getHistrory()
}
const getHistrory = async () => {
  const { data, mes, code } = await post('/outp/brDataChange/getBrDataChange', {
    brId: currentPatient.value.brId,
    columnName: columnName.value
  })
  if (code !== 0) return message.error(mes || '获取数据失败')
  histroryData.value = data
  // total.value = data.total
}
onMounted(() => {
  // getData()
})
</script>
<style lang="less" scoped>
.ant-picker {
  width: 100%;
}
</style>
